<template>
	<div class="search">
		<nav class="searchList-nav" ref="change">
			<span :class="{isActive:toggle=='Songs'}"  @click="handleChangeView('Songs')">歌曲</span>
			<span :class="{isActive:toggle=='SongLists'}"   @click="handleChangeView('SongLists')">歌单</span>
			
		</nav>
		<component :is="currentView"></component>
		
	</div>
</template>

<script>
	import searchSongs from '../components/home/search/SearchSongs'
		import searchSongLists from '../components/home/search/SearchSongLists'
	
	
	export default {
		name:'search',
		components:{
			searchSongs,
			searchSongLists
		},
		data(){
			return{
				toggle:'Songs',
				currentView:'searchSongs'  //默认为歌曲页面
			}
		},
		methods:{
			//歌手歌单组件切换
			handleChangeView(component){
				this.currentView='search'+component;
				this.toggle = component;
			}
		}
	}
	
</script>

<style lang="scss" scoped>
@import '../assets/css/search.scss';
</style>
